import React from 'react';
import Link from 'umi/link';

import { Row, Col, Button } from 'antd'
import ImgNotFound from '@/assets/exeception/404.png'
import styled from 'styled-components'
import router from 'umi/router';

const NotFound = styled.span`
  font-size: 100px;
  color: ${props => props.color};
  font-weight: 400;
`
const Line = styled.div`
  width:130px;
  height:4px;
  background:linear-gradient(90deg,rgba(24,161,198,1),rgba(8,128,223,1),rgba(107,187,255,1));
  border-radius:2px;
  `
const MyP = styled.p`
  width:283px;
  height:19px;
  font-size:18px;
  font-weight:400;
  color:rgba(0,0,0,1);
  line-height: 89px;
  opacity:0.85;
`
export default () => (
  <>
    <section style={{width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
      <Row style={{width: '90%', height: 500}}>
        <Col span={12} style={{height: '100%', display: 'flex', justifyContent: 'center'}}>
          <div>
              <NotFound color="#0880DF">4</NotFound>
              <NotFound color="#0880DF">0</NotFound>
              <NotFound color="#6BBBFF">4</NotFound>
              <Line/>
              <MyP>很抱歉，您访问的页面不存在哦！</MyP>
              <div style={{marginTop: 90}}>
                <Link to="/home">
                  <Button>返回首页</Button>
                </Link>
                  <Button onClick={ () => router.goBack()  } type="primary" style={{ marginLeft: '10%' }}>返回上一页</Button>
              </div>
          </div>
       
        </Col>
        <Col span={12} style={{height: '100%'}}>
          <img width="480" height="500" src={ImgNotFound}/>
        </Col>
      </Row>
    </section>
  </>
);
